<template>
  <div>
    <!-- 头部 -->
    <top-login @changetabs="changetabs1"></top-login>
    <!-- 选择 -->
    <nav-top></nav-top>

    <!-- 中间的内容 -->
    <div class="painting2">
      <div class="container">
        <div class="main">
          <!-- 左边选择 -->
          <div class="left">
            <div :class="['li',index==1?'icon':'']" @click="index=1">个人中心</div>
            <div :class="['li',index==2?'icon':'']" @click="index=2">我的作品</div>
            <div :class="['li',index==3?'icon':'']" @click="index=3">我的点赞</div>
            <div :class="['li',index==5?'icon':'']" @click="index=5">粉丝关注</div>
          </div>

          <!-- 右边内容 -->
          <div class="right">
            <!-- 个人中心 -->
            <div :class="['li',index==1?'icon2':'','mine']">
                <!-- 头像 -->
                <div class="top">
                    <!--左边头像修改 -->
                    <div class="lefttop">
                        <img src="../assets/img/head/tigle.jpg" alt="">
                        <div class="change">修改</div>
                    </div>
                    
                    <!-- 右边文字名字 -->
                    <div class="righttop">
                        <div class="title">{{minemessage.name}}</div>
                        <div class="people">
                            <h5>人气：<span>8000</span></h5>
                            <h5>作品：<span>{{minemessage.myarts}}</span></h5>
                            <h5>关注：<span>{{minemessage.myfavouritepeople}}</span></h5>
                            <h5>粉丝：<span>0</span></h5>
                        </div>
                    </div>
                </div>
                <!-- 账号类型 -->
                <div class="type">
                    账号类型：<span>创作者</span>
                </div>
                <!-- 头衔 -->
                <div class="headhave">
                    头衔
                </div>
                <!-- 账号 -->
                <div class="account">
                    <!-- 登录 -->
                    <div class="login">
                        <h6>登陆账号</h6>
                        <h6>修改</h6>
                    </div>
                    <!-- 手机号 -->
                    <div class="phone">
                        <h6>手机</h6>
                        <h6>{{minemessage.phone}}</h6>
                    </div>

                    <div class="mail">
                        <h6>E-mail</h6>
                        <h6>{{minemessage.email}}</h6>
                    </div>
                </div>
                <!-- 基本信息 -->
                <div class="data">
                    <!-- 基本资料 -->
                    <div class="basic">
                        <h6>基本信息</h6>
                        <h6>修改</h6>
                    </div>

                    <!-- uid -->
                    <div class="uid">
                        <h6>UID</h6>
                        <h6>{{minemessage.uid}}</h6>
                    </div>

                    <!-- 昵称 -->
                    <div class="name">
                        <h6>昵称</h6>
                        <h6>{{minemessage.name}}</h6>
                    </div>

                    <!-- 性别 -->
                    <div class="sex">
                        <h6>性别</h6>
                        <h6>{{minemessage.sex}}</h6>
                    </div>

                    <!-- 所在地 -->
                    <div class="address">
                        <h6>所在地</h6>
                        <h6></h6>
                    </div>

                    <!-- 账号类型 -->
                    <div class="acotype">
                        <h6>账号类型</h6>
                        <h6>创作者</h6>
                    </div>

                    <!-- 主页地址 -->
                    <div class="location">
                        <h6>主页地址</h6>
                        <h6>gracg.com/user/user41379W3DQV5</h6>
                    </div>

                    <!-- 主页签名 -->
                    <div class="main">
                        <h6>主页签名</h6>
                        <h6></h6>
                    </div>

                    <!-- 个人介绍 -->
                    <div class="introduce">
                        <h6>个人介绍</h6>
                        <h6>暂未写个人介绍~</h6>
                    </div>
                </div>
                
                
            </div>

            <!-- 我的作品 -->
            <div :class="['li',index==2?'icon2':'','art']">
                <!-- 顶部tabs -->
                <div class="toptabs">
                    <div :class="['lis',arts==1?'item':'']" @click="arts=1">最新</div>
                    <div :class="['lis',arts==2?'item':'']" @click="arts=2">按点赞</div>
                    <div :class="['lis',arts==3?'item':'']" @click="arts=3">按评论</div>
                    <div :class="['lis',arts==4?'item':'']" @click="arts=4">按浏览</div>
                    <div :class="['lis',arts==5?'item':'']" @click="arts=5">未通过</div>
                </div>
                <div class="bottomtabs">
                    <div :class="['lis',arts==1?'item':'','work']" @click="arts=1">
                        <!-- 作品遍历 -->
                        <div class="boxart">
                            <!-- 作品信息 -->
                            <div class="top">
                                <!-- 图片信息 -->
                                <div class="left">
                                    <img src="../assets/img/head/tigle.jpg" alt="">
                                </div>
                                <!-- 文字信息 -->
                                <div class="rights">
                                    <h6>大老虎</h6>
                                    <h6>图片数量：1</h6>
                                    <h6>发布时间：2022/11/12</h6>
                                    <div class="happen">
                                        <i></i>
                                        <h6>60</h6>
                                        <span></span>
                                        <h5>1</h5>
                                        <s></s>
                                        <h4>1</h4>
                                        
                                    </div>
                                </div>
                            </div>
                            <!-- 下部编辑信息 -->
                            <div class="change">
                                <div class="text">
                                    <h6>
                                        已发布
                                    </h6>
                                    
                                    <div class="another">
                                        <div class="different">
                                            编辑
                                        </div>

                                        <div class="del">
                                            删除
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="blackbox">
                            <div class="num">1</div>
                        </div>
                    </div>



                    <div :class="['lis',arts==2?'item':'']" @click="arts=2">按点赞</div>
                    <div :class="['lis',arts==3?'item':'']" @click="arts=3">按评论</div>
                    <div :class="['lis',arts==4?'item':'']" @click="arts=4">按浏览</div>
                    <div :class="['lis',arts==5?'item':'']" @click="arts=5">未通过</div>
                </div>
               
            </div>

            <!-- 我的赞 -->
            <div :class="['li',index==3?'icon2':'','love']">
                <!-- 顶部标题栏 -->
                <div class="navtop">
                    <i></i>
                    <h6>我的赞</h6>
                </div>

                <!-- 底部内容 -->
                <div class="navbottom">
                    
                    <div class="likebottom">
                        <!-- 要循环的 -->
                        <div class="likebox" v-for="item in myfavourite" :key="item.id" @click="uid(item.id)">
                            <img :src="item.imgs" alt="">
                            <!-- 文本 -->
                            <div class="text">
                                <!-- 看/爱 -->
                                <div class="lolita">
                                    <h6><span></span>{{item.look}} <span></span>{{item.like}}</h6>
                                </div>
                                <!-- 标题 -->
                                <div class="title">
                                    <h6>{{item.title}}</h6>
                                </div>
                                <!-- 作者 -->
                                <div class="author">
                                    <img :src="item.head" alt="">
                                    <h6>{{item.author}}</h6>
                                    <h6>{{item.time}}</h6>
                                </div>
                                <!-- 取消 -->
                                <div class="del">
                                    <!-- <h6>2021/10/11</h6> -->
                                    <h6 @click="delfavourite(item.id)">取消</h6>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>



            <div :class="['li',index==4?'icon2':'']">评论管理</div>

            <!-- 关注粉丝 -->
            <div :class="['li',index==5?'icon2':'','lovepeople']">
                <!-- 顶部的切换 -->
                <div class="toptabs">
                    <div :class="['lis',arts2==1?'item':'']" @click="arts2=1">我的关注</div>
                    <div :class="['lis',arts2==2?'item':'']" @click="arts2=2">我的粉丝</div>
                </div>

                <!-- 底部的切换 -->
                <div class="bottomtabs">
                     <div :class="['lis',arts2==1?'item':'','mylove']" @click="arts2=1">
                        <!-- 我关注的人 -->
                        <div class="lovebox" v-for="item in author2" :key="item.id">
                            <div class="navleft">
                                <!-- 头像 -->
                                <div class="left">
                                <img :src="item.head" alt="">
                                </div>
                                    <!-- 右边的介绍 -->
                                <div class="navright">
                                    <div class="name">{{item.author}}</div>
                                    <div class="have">
                                        人气<span>{{item.like}}万</span>作品<span>{{item.much}}</span>粉丝<span>{{item.look}}</span>
                                    </div>
                                    
                                </div>
                            </div>

                            <div class="del" @click="dellove(item.id)">
                                取消关注
                            </div>
                        </div>
                     </div>


                    <div :class="['lis',arts2==2?'item':'']" @click="arts2=2"></div>
                </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部 -->
    <bottom-login></bottom-login>
  </div>
</template>

<script>
import { getJsonData } from "../api/home.js";
import topLogin from "../components/topLogin";
import navTop from "../components/navTop";
import bottomLogin from "../components/bottomLogin";
export default {
    // props:["author"],
  data() {
    return {
        //我点赞的
        myfavourite:"",
        //我关注的
        author2:"",
        // 左边tabs选项卡
        index:3,
        // 我的作品顶部选项卡
        arts:1,
        //我的关注粉丝切换
        arts2:1,
        //数据信息
        recommended:"",
        //我的个人信息
        minemessage:""
    };
  },
  methods:{
    //取消关注
    dellove(num){
        
        console.log(num);
        //把id传入父组件
        this.$emit("dellove",num)
        //刷新界面//把数据重新赋值
        this.author2=JSON.parse(window.localStorage.authors)
        //刷新界面
        // console.log(window.localStorage.minemessage);
        this.minemessage.myfavouritepeople=this.author2.length
    },
    //tabs选项卡
    changetabs1(id){
        // 获得点击的数
        // console.log(id);
        this.index=id
    },
    //取消点赞
    delfavourite(num){
        console.log(num);
        // console.log(num);
        //把id传入父组件
        this.$emit("delfavourite",num)
        //刷新界面//把数据重新赋值
        this.myfavourite=JSON.parse(window.localStorage.myloves)
    },
    //我的点赞跳转
    uid(id){
      // let index = this.recommended.findIndex((item) => item.id == this.recommended[index].id);
      let index = this.recommended.findIndex((item)=>item.id==id)
      this.$router.push({path:"/work",query:{index}})
    },
  },


   
  
  created(){
    //关注的人
    this.author2 =JSON.parse(window.localStorage.getItem("authors"));
    //我点赞的人
    this.myfavourite =JSON.parse(window.localStorage.getItem("myloves"));
    //我的个人信息
    this.minemessage =JSON.parse(window.localStorage.getItem("minemessage"));
    this.minemessage=this.minemessage[0]
    //我的关注的人数
    if(!this.author2){
        return
    }else{

        this.minemessage.myfavouritepeople=this.author2.length
    }
    
    //
    this.leftab
      //获得从顶部传回来的数据并进行跳转
      let { command } = this.$route.query;
      this.index = command;

    getJsonData().then((data)=>{
        this.recommended=data.recommended
    })

  },
  components: {
    topLogin,
    navTop,
    bottomLogin,
  },
};
</script>

<style lang="scss" scoped>
.painting2{
    background-color: #f1f2f4;
}
.painting2>.container{
    background-color: #f1f2f4;
}
.painting2 .main {
    padding-top: 22px;
    padding-bottom: 22px;
    display: flex;
}
.painting2 .main>.left{
    width: 270px;
    background-color: #ffff;
    margin-right: 22px;
    text-align: center;
    box-shadow: 0px 0px 8px 0px #e4e5e6;
    height: 613px;

}
.painting2 .main .left .li{
    height: 48px;
    line-height: 48px;
    border-bottom: 1px solid #f0f0f0;
    border-left: 3px solid transparent;
}
.painting2 .main .left .li:hover{
    cursor:pointer;
}
.painting2 .main .left .icon{
    background-color: #f8f9fb;
    border-left: 3px solid #101113;
    font-weight: bold;
}
.painting2 .main .right{
    flex: 1;
    background-color: #ffff;
    box-shadow: 0px 0px 8px 0px #e4e5e6;
}
.painting2 .main .right .li{
    display: none;

}
.painting2 .main .right .li.icon2{
    display: block;
}
.painting2 .main .right .li.mine{
    padding-top: 57px;
    padding-left: 87px;
    padding-right: 87px;

}
// 标题头像名字
.painting2 .main .right .li.mine .top{
    display: flex;
    border-bottom: 1px solid #f0f0f0;
}
.painting2 .main .right .li.mine .top .lefttop{
    display: flex;
    flex-direction: column;
    align-items: center;

}
.painting2 .main .right .li.mine .top .lefttop img{
    width: 80px;
    height: 80px;
    border-radius: 50%;
}
.painting2 .main .right .li.mine .top .lefttop .change{
    margin-top: 9px;
    color: #282629;
    font-size: 12px;
    border: 1px solid #e0e0e2;
    height: 28px;
    line-height: 28px;
    border-radius: 14px;
    padding: 0px 8px;
    margin-bottom: 20px;
}
.painting2 .main .right .li.mine .top .righttop{
    display: flex;
    flex-direction: column;
    margin-left: 97px;
}
.painting2 .main .right .li.mine .top .righttop .title{
    height: 32px;
    line-height: 32px;
    font-size: 20px;
    font-weight: bolder;
}
.painting2 .main .right .li.mine .top .righttop .people{
    display: flex;
    height: 25px;
    line-height: 25px;
    color: #a2a19d;
}
.painting2 .main .right .li.mine .top .righttop .people h5 span{
    color: #441600;
    margin-right: 23px;
}
.painting2 .main .right .li.mine .type{
    font-size: 13px;
    height: 104px;
    line-height: 104px;
    border-bottom: 1px solid #eeeeee;
}
.painting2 .main .right .li.mine .type span{
    color: #b94262;
}
.painting2 .main .right .li.mine .headhave{
    font-size: 13px;
    font-weight: bold;
    height: 62px;
    line-height: 62px;
    border-bottom: 1px solid #eeeeee;
}
.painting2 .main .right .li.mine .account{
    margin-top: 11px;
    border-bottom: 1px solid #eeeeee;
}
.painting2 .main .right .li.mine .account .login{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.painting2 .main .right .li.mine .account .login h6:nth-child(1){
    font-size: 13px;
    font-weight: bold;
    height: 41px;
    line-height: 41px;
    width: 80px;
}
.painting2 .main .right .li.mine .account .login h6:nth-child(2){
    font-size: 13px;
    height: 24px;
    line-height: 24px;
    width: 40px;
    text-align: center;
    border: 1px solid #eeeeee;
    border-radius: 12px;
    color: #412f2b;
}
.painting2 .main .right .li.mine .account .phone{
    display: flex; 
}
.painting2 .main .right .li.mine .account .mail{
    display: flex; 
}
.painting2 .main .right .li.mine .account .phone h6:nth-child(1){
    width: 80px;
    margin-right: 97px;
    height: 40px;
    line-height: 40px;
    color: #9d9ca2;
    font-size: 15px;
}
.painting2 .main .right .li.mine .account .phone h6:nth-child(2){
    height: 40px;
    line-height: 40px;
    color: #3a3d36;
    font-size: 15px;
}
.painting2 .main .right .li.mine .account .mail{
    margin-bottom: 18px;
}
.painting2 .main .right .li.mine .account .mail h6:nth-child(1){
    width: 80px;
    margin-right: 97px;
    height: 40px;
    line-height: 40px;
    color: #9d9ca2;
    font-size: 15px;
}
.painting2 .main .right .li.mine .account .mail h6:nth-child(2){
    height: 40px;
    line-height: 40px;
    color: #3a3d36;
    font-size: 15px;
}
.painting2 .main .right .li.mine .data{
    margin-top: 8px;
}
.painting2 .main .right .li.mine .data .basic{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.painting2 .main .right .li.mine .data .basic h6:nth-child(1){
    font-size: 13px;
    font-weight: bold;
    height: 41px;
    line-height: 41px;
    width: 80px;
}
.painting2 .main .right .li.mine .data .basic h6:nth-child(2){
    font-size: 13px;
    height: 24px;
    line-height: 24px;
    width: 40px;
    text-align: center;
    border: 1px solid #eeeeee;
    border-radius: 12px;
    color: #412f2b;
}
.painting2 .main .right .li.mine .data .basic,.uid,.name,.sex,.address,.acotype,.location,.main,.introduce{
    display: flex;
}
.painting2 .main .right .li.mine .data .uid h6:nth-child(1){
    width: 80px;
    margin-right: 97px;
    height: 32px;
    line-height: 32px;
    color: #9d9ca2;
    font-size: 15px;
}
.painting2 .main .right .li.mine .data .uid h6:nth-child(2){
    height: 32px;
    line-height: 32px;
    color: #3a3d36;
    font-size: 15px;
}
.painting2 .main .right .li.mine .data .name h6:nth-child(1){
    width: 80px;
    margin-right: 97px;
    height: 32px;
    line-height: 32px;
    color: #9d9ca2;
    font-size: 15px;
}
.painting2 .main .right .li.mine .data .name h6:nth-child(2){
    height: 32px;
    line-height: 32px;
    color: #3a3d36;
    font-size: 15px;
}
.painting2 .main .right .li.mine .data .sex h6:nth-child(1){
    width: 80px;
    margin-right: 97px;
    height: 32px;
    line-height: 32px;
    color: #9d9ca2;
    font-size: 15px;
}
.painting2 .main .right .li.mine .data .sex h6:nth-child(2){
    height: 32px;
    line-height: 32px;
    color: #3a3d36;
    font-size: 15px;
}
.painting2 .main .right .li.mine .data .address h6:nth-child(1){
    width: 80px;
    margin-right: 97px;
    height: 32px;
    line-height: 32px;
    color: #9d9ca2;
    font-size: 15px;
}
.painting2 .main .right .li.mine .data .address h6:nth-child(2){
    height: 32px;
    line-height: 32px;
    color: #3a3d36;
    font-size: 15px;
}
.painting2 .main .right .li.mine .data .acotype h6:nth-child(1){
    width: 80px;
    margin-right: 97px;
    height: 32px;
    line-height: 32px;
    color: #9d9ca2;
    font-size: 15px;
}
.painting2 .main .right .li.mine .data .acotype h6:nth-child(2){
    height: 32px;
    line-height: 32px;
    color: #3a3d36;
    font-size: 15px;
}
.painting2 .main .right .li.mine .data .location h6:nth-child(1){
    width: 80px;
    margin-right: 97px;
    height: 32px;
    line-height: 32px;
    color: #9d9ca2;
    font-size: 15px;
}
.painting2 .main .right .li.mine .data .location h6:nth-child(2){
    height: 32px;
    line-height: 32px;
    color: #3173ed;
    font-size: 15px;
}
.painting2 .main .right .li.mine .data .main h6:nth-child(1){
    width: 80px;
    margin-right: 97px;
    height: 32px;
    line-height: 32px;
    color: #9d9ca2;
    font-size: 15px;
}
.painting2 .main .right .li.mine .data .main h6:nth-child(2){
    height: 32px;
    line-height: 32px;
    color: #3a3d36;
    font-size: 15px;
}
.painting2 .main .right .li.mine .data .introduce h6:nth-child(1){
    width: 80px;
    margin-right: 97px;
    height: 32px;
    line-height: 32px;
    color: #9d9ca2;
    font-size: 15px;
}
.painting2 .main .right .li.mine .data .introduce h6:nth-child(2){
    height: 32px;
    line-height: 32px;
    color: #3a3d36;
    font-size: 15px;
    margin-bottom: 63px;
}
// 我的作品
.painting2 .main .right .li.art{
    height: 600px;
}
//顶部选项卡
.painting2 .main .right .li.art .toptabs{
    display: flex;
    padding-left: 21px;
    margin-top: 8px;
    border-bottom: 1px solid #eeeeee;
}
.painting2 .main .right .li.art .toptabs .lis{
    font-size: 12px;
    color: #898e91;
    height: 48px;
    line-height: 48px;
    margin: 0px 15px;
}
.painting2 .main .right .li.art .toptabs .lis:hover{
    cursor: pointer;
}
.painting2 .main .right .li.art .toptabs .lis.item{
    border-bottom: 3px solid #f9dd4e;
    color: #101113;
    font-weight: bold;
}
// 底部选项卡
.painting2 .main .right .li.art .bottomtabs .lis{
    display: none;
}
.painting2 .main .right .li.art .bottomtabs .lis.item{
    display: block;
}
.painting2 .main .right .li.art .bottomtabs .lis.work{
    margin-top: 15px;
    margin-left: 19px;
    margin-right: 19px;
}
.painting2 .main .right .li.art .bottomtabs .lis.work .boxart{
    display: flex;
    flex-direction: column;
    border: 1px solid #eeeeee;
}
.painting2 .main .right .li.art .bottomtabs .lis.work .boxart .top{
    display: flex;
}
.painting2 .main .right .li.art .bottomtabs .lis.work .boxart .top .left{
    padding-top: 10px;
    padding-left: 10px;
    padding-bottom: 10px;
}
.painting2 .main .right .li.art .bottomtabs .lis.work .boxart .top .left img{
    width: 130px;
    height: 105px;
}
.painting2 .main .right .li.art .bottomtabs .lis.work .boxart .top .rights{
    margin-left: 24px;
}
.painting2 .main .right .li.art .bottomtabs .lis.work .boxart .top .rights h6:nth-child(1){
    font-size: 18px;
    font-weight: bolder;
    height: 37px;
    line-height: 37px;
}
.painting2 .main .right .li.art .bottomtabs .lis.work .boxart .top .rights>h6:nth-child(2){
    color: #a9b5c1;
}
.painting2 .main .right .li.art .bottomtabs .lis.work .boxart .top .rights>h6:nth-child(3){
    color: #a9b5c1;
    height: 33px;
    line-height: 33px;
}
.painting2 .main .right .li.art .bottomtabs .lis.work .boxart .top .rights .happen{
    display: flex;
    height: 23px;
    align-items: center;
}
.painting2 .main .right .li.art .bottomtabs .lis.work .boxart .top .rights .happen i{
    display: block;
    background-image: url(../assets/img/smlogo/see.png);
    width: 13px;
    height: 13px;
    background-size: 13px 13px;
}
.bottomtabs .lis.work .boxart .top .rights .happen h6,h5,h4{
    color: #a0a2a1;
    margin-left: 4px;
    margin-right: 23px;
    font-size: 12px;
}
.bottomtabs .lis.work .boxart .top .rights .happen span{
    display: block;
    background-image: url(../assets/img/smlogo/like.png);
    width: 13px;
    height: 13px;
    background-size: 13px 13px;
}
.bottomtabs .lis.work .boxart .top .rights .happen s{
    display: block;
    background-image: url(../assets/img/smlogo/msg_0.png);
    width: 13px;
    height: 13px;
    background-size: 13px 13px;
}
.bottomtabs .lis.work .boxart .change{
    border-top: 1px solid #eeeeee;
}
.bottomtabs .lis.work .boxart .change .text{
    display: flex;
    height: 36px;
    line-height: 36px;
    background-color: #f8f9fb;
    padding-left: 12px;
    justify-content: space-between;
    h6{
        color: #349f5b;
        font-weight: bold;
    }
    .another{
        display: flex;
        align-items: center;
        .different{
            font-size: 12px;
            height: 25px;
            line-height: 25px;
            border: 1px solid #dadedf;
            background-color: #feffff;
            color: #272725;
            margin: 0px 8px;
            padding: 0px 7px;
            border-radius: 5px;
        }
        .del{
            font-size: 12px;
            height: 25px;
            line-height: 25px;
            border: 1px solid #dadedf;
            background-color: #feffff;
            color: #272725;
            margin: 0px 8px;
            padding: 0px 7px;
            border-radius: 5px;

        }
    }
}
.bottomtabs .lis.work .blackbox{
    
    margin-top: 28px;
    width: 100%;
    display: flex;
    justify-content: center;
    .num{
    width: 38px;
    height: 38px;
    line-height: 38px;
    text-align: center;
    background-color: #333333;
    color: #ffff;
    }
}
.right .li.love .navtop{
    border-bottom: 1px solid #eeeeee;
    display: flex;
    height: 60px;
    align-items: center;
    padding-left: 21px;
    i{
        display: block;
        background-image: url(../assets/img/smlogo/like.png);
        width: 13px;
        height: 13px;
        background-size: 13px 13px;
        margin-right: 5px;
    }
    h6{
        font-weight: bold;
    }
}
.li.lovepeople .toptabs{
    border-bottom: 1px solid #eeeeee;
    display: flex;
    padding-top: 8px;
    padding-left: 21px;
}
.li.lovepeople .toptabs .lis{
    font-size: 14px;
    margin: 0px 15px;
    color: #92898c;
    height: 48px;
    line-height: 48px;
}
.li.lovepeople .toptabs .lis.item{
    border-bottom:3px solid #fbdc4d ;
    color: #2a2e39;
    font-weight: bold;
}
.li.lovepeople .bottomtabs .lis{
    display: none;
}
//显示切换
.li.lovepeople .bottomtabs .lis.item{
    display: block;
}
.li.lovepeople .bottomtabs .lis.item .lovebox{
    display: flex;
    border: 1px solid #eeeeee;
    margin: 15px;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 7px;
    .del{
        padding-right: 15px;
        font-size: 12px;
        color: #9c9c9c;
    }
}
.li.lovepeople .bottomtabs .lis.item .lovebox .navleft{
    display: flex;
}
.li.lovepeople .bottomtabs .lis.item .lovebox .left img{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    padding: 16px;
}
.li.lovepeople .bottomtabs .lis.item .lovebox .navleft .navright{
    margin-top: 12px;
    .name{
        font-size: 12px;
        font-weight: bold;
    }
    .have{
        margin-top: 10px;
        font-size: 12px;
        color: #9c9c9e;
        span{
            margin-left: 5px;
            margin-right: 18px;
            color: #373b3e;
        }
    }
    .time{
        margin-top: 10px;
        font-size: 12px;
        color: #9c9c9e;
    }
}
// 我的点赞
.li.love .navbottom .likebottom{
    padding-top: 14px;
    padding-left: 18px;
    padding-right: 18px;
    display: flex;
    // flex-direction: column;
    flex-wrap: wrap;
}
.li.love .navbottom .likebottom .likebox{
    display: flex;
    flex-direction: column;
    margin-right: 10px;
    margin-bottom: 10px;
}
.li.love .navbottom .likebottom .likebox img{
    width: 265px;
    height: 265px;

}
.li.love .navbottom .likebottom .likebox  .text{

    background-color: #f8f9fb;
    padding-top: 11px;

    display: flex;
    flex-direction: column;
} 
.li.love .navbottom .likebottom .likebox  .text .lolita{
        padding-left: 14px;

}
.li.love .navbottom .likebottom .likebox  .text .lolita h6{
    display: flex;
}
.li.love .navbottom .likebottom .likebox  .text .lolita h6 span:nth-child(1){
    display: block;
    background-image: url(../assets/img/smlogo/see.png);
    width: 15px;
    height: 15px;
    background-size: 15px 15px;
    margin-right: 4px;
}
.li.love .navbottom .likebottom .likebox  .text .lolita h6 span:nth-child(2){
    display: block;
    background-image: url(../assets/img/smlogo/like.png);
    width: 15px;
    height: 15px;
    background-size: 15px 15px;
    margin-left: 15px;
    margin-right: 4px;
}
.li.love .navbottom .likebottom .likebox  .text .title{
    margin-top: 13px;
    padding-left: 14px;
    h6{
        font-size: 14px;
        font-weight: bold;
    }
}
.li.love .navbottom .likebottom .likebox  .text .author{
    display: flex;
    margin-top: 15px;
    padding-left: 14px;
    padding-bottom: 15px;
    border-bottom: 1px solid #ecedef;
    img{
        width: 18px;
        height: 18px;
        border-radius: 50%;
    }
    h6:nth-child(2){
        color: #999a9c;
        margin-left: 9px;
        flex: 1;
    }
    h6:nth-child(3){
        color: #999a9c;
        margin-right: 7px;
    }
}
.li.love .navbottom .likebottom .likebox .text .del{
    display: flex;
    padding-left: 14px;
    padding-right: 14px;
    justify-content: space-between;
    h6:nth-child(1){
        color: #9c9d9f;
    }
    h6{
        height: 44px;
        line-height: 44px;
    }
}
</style>